<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>index页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<header>
			<h1>index页面</h1>
		</header>
		<main>
			<form action="hd.php" method="POST">
			<fieldset>
				<legend>测试</legend>
				<input type="text" pattern="[a-zA-Z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
			</fieldset>
			<fieldset>
		      <legend>文本框</legend>
		      <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100"><br>
		      <input type="number" placeholder="number"> <br>
		      <input type="tel" placeholder="tel"> <br>

		  </fieldset>
			<fieldset>
		      <legend>调取摄像头</legend>
		      <input type="file" capture="camera" accept="image/*" />
		  </fieldset>
		<button type="submit" id="bt1">提交表单1</button>
		<button  id="bt2">提交表单2</button>
		<button type="button" id="bt3">提交表单3</button>
		</form>
		</main>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script src="index.js"></script>
	<script type="text/javascript">
		function validate(message) {
			alert(message);
		}
		console.log($('#bt1').attr('type'))
		console.log($('#bt2').attr('type'))
		console.log(bt2.type)
		console.log(bt3.type)
		console.dir(bt2)
	</script>
</body>
</html>